<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="IDo uniapp技术问题集合"><meta name="keywords" content="IDo uniapp vue2.x"><meta name="author" content="晟松"><meta name="copyright" content="晟松"><title>IDo uniapp技术问题集合 | 晟松</title><link rel="shortcut icon" href="/logo.png"><link rel="stylesheet" href="/css/index.css?version=1.9.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.9.0"><meta name="format-detection" content="telephone=no"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="dns-prefetch" href="https://hm.baidu.com"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c34d81d53341febe06a155941e2df16d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  hexoVersion: '5.4.0'
} </script><meta name="generator" content="Hexo 5.4.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar" data-display="true"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%8D%95%E4%BD%8D"><span class="toc-number">1.</span> <span class="toc-text">1.单位</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E9%80%BB%E8%BE%91"><span class="toc-number"></span> <span class="toc-text">前端页面逻辑</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#uniapp%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93"><span class="toc-number"></span> <span class="toc-text">uniapp使用总结</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D"><span class="toc-number"></span> <span class="toc-text">页面功能介绍</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BC%93%E5%AD%98"><span class="toc-number"></span> <span class="toc-text">缓存</span></a></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">晟松</div><div class="author-info__description text-center">晟松的博客</div><div class="follow-button"><a target="_blank" rel="noopener" href="https://gitee.com/cheng_song">Gitee</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">52</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">45</span></a></div></div></div><div id="content-outer"><div id="top-container" style="background-image: url(/img/blog-bg.jpg)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">晟松</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus">   <a class="site-page" href="/">Home</a><a class="site-page" href="/archives">Archives</a><a class="site-page" href="/tags">Tags</a><a class="site-page" href="/categories">Categories</a></span><span class="pull-right"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> 搜索</span></a></span></div><div id="post-info"><div id="post-title">IDo uniapp技术问题集合</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2020-12-11</time><div class="post-meta-wordcount"><span>字数总计: </span><span class="word-count">1.7k</span><span class="post-meta__separator">|</span><span>阅读时长: 5 分钟</span></div></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><p>就是一个对于uniapp微信小程序项目遇到的技术问题和解决方法，还有一些关于uniapp和其他杂乱的知识的集合</p>
<p><a target="_blank" rel="noopener" href="https://ask.dcloud.net.cn/article/35489">关于uni-app的ui库、ui框架、ui组件</a></p>
<p><a target="_blank" rel="noopener" href="http://www.uviewui.com/components/intro.html">使用的组件库uview</a></p>
<p><a target="_blank" rel="noopener" href="https://gitee.com/cheng_song/ido-practice-management">码云代码仓库</a></p>
<h4 id="1-单位"><a href="#1-单位" class="headerlink" title="1.单位"></a>1.单位</h4><p>一般直接使用uniapp自定义的<strong>rpx</strong>单位和vw、vh来进行单位的设置，rem、百分比这个主要适用于响应式，但这只是一个微信小程序，所以使用rpx即可，uniapp将所有手机的屏幕都看成750rpx，可根据这个来进行布局设置</p>
<h3 id="前端页面逻辑"><a href="#前端页面逻辑" class="headerlink" title="前端页面逻辑"></a>前端页面逻辑</h3><p>主体页面：</p>
<ul>
<li><p>登录页：输入账号密码可登录，也可点击注册按钮进行企业人员注册，之后就跳转到首页</p>
</li>
<li><p>注册页：输入工号和注册码，同时就在这里就确认其密码，点击注册后就跳转到企业人员的首页</p>
</li>
<li><p>首页：目前主要展示一些酒店的招聘信息和企业信息这些，后面迭代时加入简历投递的功能</p>
</li>
<li><p>实习圈：分为两个页面，可左右进行滑动切换（目前还未对里面的内容进行管理实现）</p>
<ul>
<li>加油站：显示学生、老师、企业人员发布的一些加油打气的消息，里面可携带每周主题。同时其他人可以对这个消息进行点赞评论</li>
<li>撕逼墙：显示所有人的吐槽，所有的信息都是匿名发布的，同时所有的点赞、评论也都是匿名的</li>
</ul>
</li>
<li><p>发布：用户先选择发布什么类型的消息（是加油站还是撕逼墙），之后进行编辑页面，可输入文字和图片选择（只能选一张），还可选择是否携带每周主题</p>
</li>
<li><p>消息：类似csdn的消息界面（移动端），在里面会看到总的消息和消息分类</p>
<ul>
<li>守护天使：点击消息界面的守护天使选项后，进行选择界面（选择是其天使还是其守护）之后再次进行点击进入聊天界面进行聊天（目前还只能文字，不能发图片） </li>
</ul>
</li>
<li><p>我的：根据登录人员的类型显示不同的内容</p>
<ul>
<li>学生端：头像、姓名、所在酒店和部门、我的简历、实习宝藏、设置</li>
<li>企业端：实习宝藏审核</li>
<li>老师端：学生实习宝藏情况查看，就是直接跳转到学生可以看到的实习宝藏排行页面</li>
</ul>
</li>
</ul>
<h3 id="uniapp使用总结"><a href="#uniapp使用总结" class="headerlink" title="uniapp使用总结"></a>uniapp使用总结</h3><p>为何使用uniapp</p>
<p>主要是因为我们自己的需求可能需要多端的应用，为了以后的方便，所以直接使用uniapp这一个多端跨平台的框架来进行前端开发。而且其目前是基于vue2.x的语法进行开发，而目前vue2是比较成熟的一个体系，所以综合选择了uniapp</p>
<p>使用技术</p>
<p>因为uniapp自己的限制，所以就没有使用vue-router了，而直接使用其知道的page.json进行页面路由的管理；此外使用了vuex进行全局状态管理，并使用本地缓存技术将一些比较核心的数据缓存在本地；使用uview的组件库，让页面的美观度更好；使用uview的网络请求拦截和全局api管理；使用scss优化css的编写</p>
<p>使用体验</p>
<p>目前来看，uniapp为了跨平台，对vue的一些扩展进行了删减，例如vuex的全局状态，在uniapp的官方文档里面其实很少见这个东西，还是自己对这个项目进行一个扩展，所以一些原来的vuex的为了进行良好管理的功能都没有了，所以一个不注意，就会造成各种奇怪的bug。至于其他的一些东西，有一些奇怪的bug，不知道是因为uniapp自己的还是uview组件库的。除此之外，uniapp对目前简单的项目开发还是挺好的，无论是页面路由的管理还是对vue语法的支持都是挺方便的</p>
<h3 id="页面功能介绍"><a href="#页面功能介绍" class="headerlink" title="页面功能介绍"></a>页面功能介绍</h3><p>pages目录的页面结构和介绍</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">├── error</span><br><span class="line">│   └── error.vue <span class="comment">//错误页面，当出现错误时跳转到这个页面</span></span><br><span class="line">├── home</span><br><span class="line">│   └── home.vue <span class="comment">//”首页“页面，一登录成功后跳转到这个页面</span></span><br><span class="line">├── internship</span><br><span class="line">│   └── internship.vue <span class="comment">//”实习圈“页面，目前的计划还未迭代到这里</span></span><br><span class="line">├── login</span><br><span class="line">│   ├── loginForm.vue <span class="comment">//登录页面，所有的用户都是在这个页面登录</span></span><br><span class="line">│   └── register.vue <span class="comment">//注册页面，企业员工使用企业注册码在这个页面填写个人信息并注册，注册成功后跳转到登录页面登录</span></span><br><span class="line">└── student</span><br><span class="line">    ├── addMessage</span><br><span class="line">    │   ├── addMessage.vue <span class="comment">//发布页面，用户选择需要发布的消息类型</span></span><br><span class="line">    │   └── edit.vue <span class="comment">//消息的编辑页面，目前只是一个页面，还未与后台有联系</span></span><br><span class="line">    ├── message</span><br><span class="line">    │   ├── guardAngel</span><br><span class="line">    │   │   ├── chat.vue <span class="comment">//聊天界面，目前还只能发送文字，还未能发送图片，支持下拉刷新，消息更新</span></span><br><span class="line">    │   │   └── guardAngel.vue <span class="comment">//守护天使的选择界面，选择与哪一位进行聊天</span></span><br><span class="line">    │   ├── interview</span><br><span class="line">    │   │   └── interview.vue <span class="comment">//还未迭代到这里来</span></span><br><span class="line">    │   ├── lectureMeeting</span><br><span class="line">    │   │   └── lectureMeeting.vue <span class="comment">//还未迭代到这里来</span></span><br><span class="line">    │   ├── message.vue <span class="comment">//”消息“页面，主要显示系统消息和一些实习通知，守护天使通知等</span></span><br><span class="line">    │   ├── messageDetails.vue <span class="comment">//消息详情页面</span></span><br><span class="line">    │   └── monthlySummary</span><br><span class="line">    │       └── monthlySummary.vue <span class="comment">//还未迭代到这里来</span></span><br><span class="line">    └── my</span><br><span class="line">        ├── my.vue <span class="comment">//&quot;我的&quot;页面，显示自己的头像姓名和一些功能模块，会根据用户的身份显示不同的功能</span></span><br><span class="line">        ├── myDetails</span><br><span class="line">        │   ├── changeIntro.vue <span class="comment">//修改信息的页面，如修改手机号，密码等</span></span><br><span class="line">        │   └── myDetails.vue <span class="comment">//”我的“详细信息的页面，可对头像、性别进行修改，还能看自己的一些信息</span></span><br><span class="line">        ├── set</span><br><span class="line">        │   └── set.vue <span class="comment">//”设置“页面，可修改自己的手机号、邮箱、登录密码等</span></span><br><span class="line">        └── treasure</span><br><span class="line">            ├── starRank.vue <span class="comment">//实习宝藏星星数排行页面</span></span><br><span class="line">            ├── submitTask.vue <span class="comment">//实习宝藏任务提交页面，可提交文字和图片</span></span><br><span class="line">            ├── taskDescribe.vue <span class="comment">//企业员工审核学生提交的任务和详细信息，并给出自己的分数</span></span><br><span class="line">            ├── taskRecord.vue <span class="comment">//任务记录页面，可查看自己进行中、审核中和已完成的任务记录</span></span><br><span class="line">            ├── treasure.vue <span class="comment">//”实习宝藏“页面，可查看目前可进行的任务和已进行、审核中和已完成的任务</span></span><br><span class="line">            └── treasureCheck.vue <span class="comment">//企业员工的实习宝藏审核页面，查看自己关联学生提交的任务</span></span><br></pre></td></tr></table></figure>





<h3 id="缓存"><a href="#缓存" class="headerlink" title="缓存"></a>缓存</h3><p>在uniapp里面的本地缓存的存储和清除的时机有一些问题，需要再理清楚</p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">晟松</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://chengsong.info/2020/12/11/IDo-uniapp技术问题集合/">https://chengsong.info/2020/12/11/IDo-uniapp技术问题集合/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://chengsong.info">晟松</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/IDo-uniapp-vue2-x/">IDo uniapp vue2.x</a></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2021/01/10/scss%20less%E7%9A%84%E7%AE%80%E5%8D%95%E5%AD%A6%E4%B9%A0/"><i class="fa fa-chevron-left">  </i><span>scss less的简单学习</span></a></div><div class="next-post pull-right"><a href="/2020/11/28/vue-nuxt-node%E9%83%A8%E7%BD%B2%E9%97%AE%E9%A2%98/"><span>vue nuxt node部署服务器</span><i class="fa fa-chevron-right"></i></a></div></nav></div></div><footer class="footer-bg" style="background-image: url(/img/blog-bg.jpg)"><div class="layout" id="footer"><div class="copyright">&copy;2020 - 2023 By 晟松</div><div class="framework-info"><span>驱动 - </span><a target="_blank" rel="noopener" href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="icp"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><span>湘ICP备2020021729号</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv"><i class="fa fa-file"></i><span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.9.0"></script><script src="/js/fancybox.js?version=1.9.0"></script><script src="/js/sidebar.js?version=1.9.0"></script><script src="/js/copy.js?version=1.9.0"></script><script src="/js/fireworks.js?version=1.9.0"></script><script src="/js/transition.js?version=1.9.0"></script><script src="/js/scroll.js?version=1.9.0"></script><script src="/js/head.js?version=1.9.0"></script><script src="/js/search/local-search.js"></script><script>if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
  $('#top-container').addClass('is-mobile')
}</script><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"></div></div></div><hr><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>